<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.1.0.css" />
<link rel="stylesheet"  href="lib/lm.css" />
<script type="text/javascript" src="lib/iscroll.js"></script>
<script type="text/javascript" src="lib/lm.js"></script>
<script type="text/javascript" src="lib/cordova-1.7.0.js"></script>
<script type="text/javascript" src="lib/jquery.tmpl.js"></script>
<script type="text/javascript" src="lib/connector.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.json-2.3.js"></script> 





<script type="text/javascript">

	var myScroll;
	var curPage;	//0为主页面
					//1为商家列表
					//2为商家详细信息
	var isLockCall = false;
	function loaded() {
		//document.addEventListener("deviceready", onDeviceReady, false);
		document.addEventListener("backbutton", onBackKeyDown, false);
		document.addEventListener("resume", onResume, false);
		myScroll = new iScroll('wrapper');
//		shopScroll = new iScroll('shopScroll');
	}

	function onResume(){
		isLockCall = false;
		document.addEventListener("backbutton", onBackKeyDown, false);
	}
	
	
	$(document).ready(function () 
		{
			var hiddenTab = $('#hiddentab');
			hiddenTab.hide();
			jumpToMain();
		});
	
	function jumpToMain(){
		curPage = 0;
		lmtab('lmt2');
	}
	
	function jumpToShopLists(){
		//jump to show lists page
		curPage = 1;
		lmtab('lmt1');
		//myScroll = new iScroll('wrapper');
		myScroll.refresh();
	}

	function jumpToShopDetails(){
		curPage = 2;
		lmtab('lmt3');
		isLockCall = false;
		//myScroll = new iScroll('shopwrapper');
		//myScroll.refresh();
	}
	
	
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
//    function onDeviceReady() {
//        // Register the event listener
//        document.addEventListener("backbutton", onBackKeyDown, false);
//        alert('go back!');
//    }
    
    
    function callTel(){
    	if(isLockCall==false){
    		isLockCall = true;
        	var uir = ("tel:114"); window.plugins.childBrowser.openExternal(uir);
        	console.log('callTel:');
    	}
    }
    
    function driveToDes(){
    	if(isLockCall==false){
    		isLockCall = true;
    		var uir = ("geo:31.23136,121.47004"); window.plugins.childBrowser.openExternal(uir);
    		console.log('driveToDes:');
    	}
    }
    
    // Handle the back button
    //
    function onBackKeyDown() {
    	console.log('onBackKeyDown:'+curPage);
    	switch(curPage){
		case 0:
			{
				navigator.app.exitApp();
				break;
			}
		case 1:
			{
				jumpToMain();
				break;
			}
		case 2:
			{
				jumpToShopLists();
				break;
			}
    	}
    }
	/* * * * * * * *
	 *
	 * Use this for high compatibility (iDevice + Android)
	 *
	 */
	document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
	/*
	 * * * * * * * */
	
	
	/* * * * * * * *
	 *
	 * Use this for iDevice only
	 *
	 */
	//document.addEventListener('DOMContentLoaded', loaded, false);
	/*
	 * * * * * * * */
	
	
	/* * * * * * * *
	 *
	 * Use this if nothing else works
	 *
	 */
	//window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);
	/*
	 * * * * * * * */
</script>

<style type="text/css" media="all">
body,ul,li {
	padding:0;
	margin:0;
	border:0;
}

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}



#wrapper {
	position:absolute; z-index:1;
	top:43px; bottom:48px; left:0;
	width:100%;
	background:#aaa;
	margin:0;
	overflow:auto;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:100px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}

#shopwrapper {
	position:absolute; z-index:1;
	top:43px; bottom:48px; left:0;
	width:100%;
	background:#aaa;
	margin:0;
	overflow:auto;
}

#shopscroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#shopscroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}



</style>
</head>
<body onload="loaded();">
<div class="LM-header" data-role="header" data-theme="b"> 
	<h1>
	<a onclick="onBackKeyDown();" data-role="button" class="ui-btn-left" >back</a>
	<span>
		Page Title
	</span>
	</h1> 
</div> 
<div class="LM-card cur" id="lmc1">
	<!-- lmt1 -->
	<div class="LM-tab" id="lmt1">
		<div id="wrapper">
			<div id="scroller">
				<div data-role="controlgroup" data-type="horizontal" style="width:100%;" align="center">
					<a href="index.html" data-role="button" style="width:40%" data-icon="send-msg">1234</a>
					<a href="index.html" data-role="button" style="width:40%">No</a>
				</div>
		   		<ul data-role="listview" style=" width:100%; float:center" data-theme="c">
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
					<li>
						<a onclick="jumpToShopDetails();">
						<img src="img/shop.jpg" />
						<h3>Broken Bells</h3>
						<p>
							Broken Bells
							<span class="ui-li-staic" style="float:right; margin-right:20px">
								1234
							</span>
						</p>
						</a>
					</li>
				</ul>
			</div><!-- end of scroller -->
		</div><!-- end of wrapper -->
		<!-- 
		<script type="text/javascript">
			var myScroll = new iScroll('wrapper');
		</script>
		 -->
	</div> <!-- end of lmt1 -->

	<!-- lmt2 -->
	<div class="LM-tab" id="lmt2">
		<ul data-role="listview" data-theme="c" data-dividertheme="d">
			<li>
	          <table align="center">
					  <tr>
						<td>
							<input type="search" name="password" id="search" value="" />
						</td>
						<td>
						   <a data-role="button" onclick="jumpToShopLists();">go</a>
						</td>
					  </tr>
			  </table>
	        </li>
		</ul>
		<p style="height:30px">
		</p>
	    <table width="80%" align="center">
	  		<tr>
	    		<td>
	    			 <a onclick="jumpToShopLists();" data-role="button">addoil</a>
	    		</td>
				<td>
					 <a onclick="jumpToShopLists();" data-role="button">washcar</a>
				</td>
	  		</tr>
			<tr>
				<td align="center">
					<font color="#FFFFFF">
						addoil
					</font>
				<td align="center">
					<font color="#FFFFFF">
						washcar
					</font>
				</td>
			</tr>
		</table>
	</div>
	<!-- end of lmt2 -->
	
	<!-- lmt3 -->
	<div class="LM-tab" id="lmt3">
		<div id="shopwrapper">
		<div id="shopscroller">
		<table width="100%">
				<tr>
					<td >
						<a>
							<img src="img/shop.jpg" />					
						</a>				
					</td>
					<td valign="top">
						<table width="100%">
							<tr>
								<td width="100%" valign="top" style="margin-top:-50px">
									<h2>123
									</h2>						
								</td>
							</tr>
							<tr width="100%">
								<td width="40%" nowrap="nowrap">
								<span id="shoptitle">
									洗车：15元/次</span></td>
								<td  width="60%" nowrap="nowrap" align="right">
								<span id="shoptitle">
								4581234米
								</span>							
								</td>
							</tr>
					  	</table>
					</td>
				</tr>
		  </table>
		  <!-- 水平分割线-->
		  <hr />
		  <ul data-role="listview" data-inset="true">
				<li style="height:50px">
				<a  onclick="callTel();">
						<img src="img/icon-phone.png" width="42" height="42" align="absmiddle"/>
						<span>
						1234555
						</span>
				</a>
				<li style="height:50px">
				<a  onclick="driveToDes();">
						<img src="img/icon-phone.png" width="42" height="42" align="absmiddle"/>
						<span>
						地址：fjkdsjfksjdfk
						</span>
				</a>
				</li>
			</ul>	<!--end of ul -->
		
		<!--优惠信息开始 -->
		<h2>优惠信息：</h2>
		<ul data-role="listview" data-inset="true">
				<li>
					shops12847323479fjsdfjslkdjfklsjfkjslkfjlskjfkl jslkjflksj lkjksflkslkdj
				</li>
				<li>school</li>
				<li>hello</li>
		</ul>
		<!--end of 优惠信息-->
		<!--服务项目开始 -->
		<h2>服务项目：</h2>
		<ul data-role="listview" data-inset="true">
				<li>
					WASHCAR:FJSDFKJSDKF
				</li>
				<li>school</li>
				<li>hello</li>
		</ul>
		<!--end of 服务项目-->
		</div><!-- end of showscroller -->
		</div><!-- end of showwrapper -->
	</div><!-- end of lmt3 -->
</div> <!-- card end -->

<!-- lmc2 -->
<div class="LM-card" id="lmc2">
<div class="ui-grid-a">
	<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
	<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->
</div>
<!-- end of lmc2 -->

<!-- lmc3 -->
<div class="LM-card" id="lmc3">
card3
</div>
<!-- end of lmc3 -->

<!-- lmc4 -->
<div class="LM-card" id="lmc4">
card4
</div>
<!-- end of lmc4 -->

<!-- lmc5 -->
<div class="LM-card" id="lmc5">
card5
</div>
<!-- end of lmc5 -->

<!-- footer -->
<div id="footer" class="LM-footer" data-theme="a" data-role="footer">
	<div data-role="navbar">
		<ul>
			<li><a href="#" onclick="lmcard('lmc1');lmlist('thelist','thelisttpl', myScroll );" data-icon="check" class="ui-btn-active">One</a></li>
			<li><a href="#" onclick="lmcard('lmc2');" data-icon="check">Two</a></li>
			<li><a href="#" onclick="lmcard('lmc3');" data-icon="check">Tree</a></li>
			<li><a href="#" onclick="lmcard('lmc4');" data-icon="check">four</a></li>
			<li><a href="#" onclick="lmcard('lmc5');" data-icon="check">five</a></li>
		</ul>
	</div><!-- /navbar -->
</div>
<!-- end of footer -->

<script id="thelisttpl" type="text/html">
    <li>
    <div class="weibocontent">${title}</div>
    
    </li>
</script>



</body>
</html>
